<template>
  <div class="warp-form">
    <div class="warp-back">
      <div class="form-left"></div>
      <div class="form-reight">
        <h1>创建账号</h1>
        <a-form :form="form" @submit="handleSubmit">
          <a-form-item v-bind="formItemLayout" label="邮箱">
            <a-input
              v-decorator="[
                'email',
                {
                  rules: [
                    {
                      type: 'email',
                      message: '不是一个正确的邮箱!',
                    },
                    {
                      required: true,
                      message: ' 请输入邮箱!',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
            <a-input
              v-decorator="[
                'password',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入您的密码!',
                    },
                    {
                      validator: validateToNextPassword,
                    },
                  ],
                },
              ]"
              type="password"
              v-model="a"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="确认密码" has-feedback>
            <a-input
              v-decorator="[
                'confirm',
                {
                  rules: [
                    {
                      required: true,
                      message: '请再次输入您的密码!',
                    },
                    {
                      validator: compareToFirstPassword,
                    },
                  ],
                },
              ]"
              type="password"
              @blur="handleConfirmBlur"
              v-model="a"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout">
            <span slot="label">
              昵称&nbsp;
              <a-tooltip title="What do you want others to call you?">
                <a-icon type="question-circle-o" />
              </a-tooltip>
            </span>
            <a-input
              v-decorator="[
                'nickname',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入您的昵称',
                      whitespace: true,
                    },
                  ],
                },
              ]"
              v-model="a"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="现住地址">
            <a-cascader
              v-decorator="[
                'residence',
                {
                  initialValue: ['山西', '太原', '小店'],
                  rules: [
                    {
                      type: 'array',
                      required: true,
                      message: '请选择正确的地址!',
                    },
                  ],
                },
              ]"
              :options="residences"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="手机号">
            <a-input
              v-decorator="[
                'phone',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入您的手机号!',
                    },
                  ],
                },
              ]"
              style="width: 100%"
              v-model="a"
            >
              <a-select
                slot="addonBefore"
                v-decorator="['prefix', { initialValue: '86' }]"
                style="width: 70px"
              >
                <a-select-option value="86"> +86 </a-select-option>
                <a-select-option value="87"> +87 </a-select-option>
              </a-select>
            </a-input>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="验证码">
            <a-row :gutter="8">
              <a-col :span="12">
                <a-input
                  v-decorator="[
                    'captcha',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请输入你得到的验证码!',
                        },
                      ],
                    },
                  ]"
                  v-model="a"
                />
              </a-col>
              <a-col :span="12">
                <a-button>获取验证码</a-button>
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item v-bind="tailFormItemLayout">
            <a-checkbox
              v-decorator="['agreement', { valuePropName: 'checked' }]"
            >
              我已经看过此协议
              <a> 《协议》 </a>
            </a-checkbox>
          </a-form-item>
          <a-form-item v-bind="tailFormItemLayout">
            <a-button type="primary" html-type="submit" @click="go()">
              确认注册并登录
            </a-button>
            <a-button style="margin-left: 20px" @click="goLogin()">
              已有账号
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
const residences = [
  {
    value: "山西",
    label: "山西",
    children: [
      {
        value: "太原",
        label: "太原",
        children: [
          {
            value: "小店",
            label: "小店",
          },
        ],
      },
    ],
  },
  {
    value: "杭州",
    label: "杭州",
    children: [
      {
        value: "滨江",
        label: "滨江",
        children: [
          {
            value: "行云",
            label: "行云",
          },
        ],
      },
    ],
  },
];

export default {
  data() {
    return {
      confirmDirty: false,
      residences,
      autoCompleteResult: [],
      a: "",
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  // validateUsername(rule,value,callback){
  //   var params = {
  //     id:this.model.id,
  //     username:value
  //   }
  //   checkUsername(params).then((res)=>{
  //     if(res.success){
  //       callback();
  //     }else{
  //       callback('用户已存在！')
  //     }
  //   })
  // },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "register" });
  },

  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    handleConfirmBlur(e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("password")) {
        callback("两次输入的密码不一致!");
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(["confirm"], { force: true });
      }
      callback();
    },
    handleWebsiteChange(value) {
      let autoCompleteResult;
      if (!value) {
        autoCompleteResult = [];
      } else {
        autoCompleteResult = [".com", ".org", ".net"].map(
          (domain) => `${value}${domain}`
        );
      }
      this.autoCompleteResult = autoCompleteResult;
    },
    go() {
      if (this.a !== "") {
        this.$router.push("/Login");
      }
    },
    goLogin() {
      this.$router.push("/Login");
    },
  },
};
</script>

<style lang="scss" scoped>
.warp-form {
  .form-left {
    height: 450px;
    width: 200px;
    float: left;
  }
  .form-reight {
    height: 450px;
    width: 350px;
    float: right;
    margin-right: 15px;
  }
  h1 {
    text-align: center;
    margin-top: 40px;
  }
  height: 800px;
  background: url("../assets/img/1.jpg");
  background-size: 1700px;
  .warp-back {
    width: 902px;
    height: 600px;
    margin: 0 auto;
    background: url("../assets/img/管理员登录_03.jpg") no-repeat;
    position: relative;
    top: 100px;
  }
}

#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>